<!-- 规则配置弹窗 -->
<template>
    <div class="rule-config-dialog">
        <el-dialog title="规则配置" :visible.sync="dialogVisible" width="1630px" :before-close="handleClose"
            :close-on-click-modal="false" :destroy-on-close="true">
            <div class="rule-config">
                <div class="r-c-left">
                    <div class="r-c-left__title">
                        规则列表
                    </div>
                    <div class="r-c-left__member">
                        {{ filteredTableData.length }} 规则
                    </div>
                    <div class="r-c-left__split"></div>
                    <div class="r-c-left__query_add">
                        <div class="r-c-left__query">
                            <el-input prefix-icon="el-icon-search" v-model="searchText" class="jtyj-input"
                                clearable></el-input>
                        </div>
                        <div class="r-c-left__add">
                            <el-button class="jtyj-btn-cancel" @click="handleDelete">删除</el-button>
                            <el-button type="primary" @click="handleAdd">新增</el-button>
                        </div>
                    </div>
                    <div class="r-c-left__table">
                        <el-table :data="filteredTableData" style="width: 100%; margin-top: 20px">
                            <el-table-column type="selection" width="55">
                            </el-table-column>
                            <el-table-column type="expand">
                                <template slot-scope="props">
                                    <el-table ref="multipleExpandTable" :data="filteredTableData" tooltip-effect="dark"
                                        highlight-current-row style="width: 100%"
                                        @selection-change="handleSelectionChange" @row-click="handleRowClick">
                                        <el-table-column type="selection" width="55">
                                        </el-table-column>
                                        <el-table-column prop="triggerId" label="执行者">
                                        </el-table-column>
                                        <el-table-column prop="eventId" label="执行指令">
                                        </el-table-column>
                                    </el-table>
                                </template>
                            </el-table-column>
                            <el-table-column prop="triggerId" label="触发者" width="180">
                            </el-table-column>
                            <el-table-column prop="eventId" label="事件">
                            </el-table-column>
                        </el-table>
                    </div>
                </div>
                <div class="r-c-right">
                    <div class="r-c-right__title">
                        指令详情
                    </div>
                    <div class="r-c-right__split"></div>
                    <VueForm :formProps="formProps" :formFooter="formFooter" :schema="tempData.JsonSchemaData"
                        v-model="tempData.JsonData">
                    </VueForm>
                </div>
            </div>

            <AddRuleDialog ref="addRuleDialogRef"></AddRuleDialog>
        </el-dialog>
    </div>

</template>

<script>
import VueForm from '@lljj/vue-json-schema-form';
import AddRuleDialog from './add-rule-dialog.vue';
export default {
    name: "RuleConfigDialog",
    components: {
        VueForm,
        AddRuleDialog
    },
    data() {
        return {
            dialogVisible: false,
            formFooter: {
                show: false, // 是否显示默认底部
                okBtn: '保存', // 确认按钮文字
                cancelBtn: '取消' // 取消按钮文字
            },
            formProps: {
                layoutColumn: 1, // 1 2 3 ，支持 1 2 3 列布局，如果使用inline表单这里配置无效
                inline: true, // 行内表单模式，建议：开启时labelPosition不要配置top, antd不要配置labelCol wrapperCol
                inlineFooter: false, // 如果想要保存按钮和表单元素一行显示，需要配置 true
                labelSuffix: '：', // label后缀
                labelPosition: 'left', // 表单域标签的位置
                isMiniDes: true, // 是否优先mini形式显示描述信息（label文字和描述信息同行显示）
                defaultSelectFirstOption: true, // 单选框必填，是否默认选中第一个
                popover: {}, // 透传给ui 组件库的popver组件，比如element ui Popover，antd a-popover
                disabled: true
            },
            tableData: [{
                triggerId: '卫星',
                eventId: '引擎倍速改变',
            }, {
                triggerId: '卫星',
                eventId: '视景聚焦',
            }, {
                triggerId: '卫星',
                eventId: '发射喷涂',
            }, {
                triggerId: '导弹',
                eventId: '到达路径点',
            }, {
                triggerId: '导弹',
                eventId: '修改目标点',
            }],
            searchText: "",
            tempData: {
                "JsonSchemaData": {
                    "type": "object",
                    "properties": {
                        "chineseName": {
                            "type": "string",
                            "description": "中文名称",
                            "title": "中文名称"
                        },
                        "englishName": {
                            "type": "string",
                            "description": "英文名称",
                            "title": "英文名称"
                        },
                        "coordinates": {
                            "type": "object",
                            "properties": {
                                "x": {
                                    "type": "number",
                                    "description": "经度",
                                    "title": "经度",
                                    "default": 0
                                },
                                "y": {
                                    "type": "number",
                                    "description": "纬度",
                                    "title": "纬度",
                                    "default": 0
                                },
                                "z": {
                                    "type": "number",
                                    "description": "高度",
                                    "title": "高度",
                                    "default": 0
                                }
                            },
                            "x-apifox-orders": [
                                "x",
                                "y",
                                "z"
                            ],
                            "description": "位置(经纬高)",
                            "required": [
                                "x",
                                "y",
                                "z"
                            ],
                            "title": "位置"
                        },
                        "modelStepSize": {
                            "type": "number",
                            "description": "步长",
                            "title": "步长",
                            "default": 0
                        },
                        "currentHealth": {
                            "type": "number",
                            "description": "血量",
                            "title": "血量",
                            "default": 0
                        }
                    },
                    "x-apifox-orders": [
                        "chineseName",
                        "englishName",
                        "coordinates",
                        "modelStepSize",
                        "currentHealth"
                    ],
                    "required": [
                        "chineseName",
                        "englishName",
                        "coordinates",
                        "modelStepSize",
                        "currentHealth"
                    ]
                },
                "JsonData": {
                    "chineseName": "测试",
                    "englishName": "test",
                    "currentHealth": "111",
                    "coordinates": {
                        "x": 3,
                        "y": 2,
                        "z": 2
                    },
                    "modelStepSize": "11"
                }
            }
        };
    },
    computed: {
        filteredTableData() {
            console.log(this.searchText);
            if (!this.searchText) return this.tableData
            const search = this.searchText.toLowerCase()
            return this.tableData.filter(item =>
                item.triggerId.toLowerCase().includes(search) ||
                item.eventId.toLowerCase().includes(search)
            )
        }
    },
    methods: {
        objectSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex === 1) {
                if (rowIndex % 2 === 0) {
                    return {
                        rowspan: 2,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        handleAdd() {
            this.$refs.addRuleDialogRef.dialogVisible = true;
        },
        handleDelete() {

        },
        handleClose(done) {
            this.dialogVisible = false;
        },

        // 表格选中状态改变
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },

        // 处理行点击
        handleRowClick(row, column, event) {
            console.log("row-click", { row, column, event });
            // 基于当前点击行的 任务ID和指令ID，请求数据结构和数据进行展示

        },
    },
};
</script>

<style lang="scss" scoped>
.rule-config-dialog {
    .rule-config {
        width: 1630px;
        height: 700px;
        display: flex;

        .r-c-left {
            width: 700px;
            height: 100%;
            display: flex;
            flex-direction: column;
            padding-right: 25px;
            border-right: 1px solid var(--ui-border-color-split);

            .r-c-left__title {
                font-size: var(--ui-font-size-title);
                font-weight: var(--ui-font-weight-semibold)
            }

            .r-c-left__member {
                margin-top: 10px;
            }

            .r-c-left__split {
                margin-top: 30px;
                border-top: 1px solid var(--ui-border-color-split);
            }

            .r-c-left__query_add {
                margin-top: 30px;
                padding-bottom: 15px;
                display: flex;
                justify-content: space-between;
                border-bottom: 1px solid var(--ui-border-color-split);
            }

            .r-c-left__table {
                flex: 1;
                overflow: auto;

                ::v-deep .el-table__row {
                    height: 42px;
                }

                ::v-deep .el-table td.el-table__cell div {
                    padding-left: 10px;
                }
            }
        }

        .r-c-right {
            width: 900px;
            height: 100%;
            padding-left: 25px;

            .r-c-right__title {
                font-size: var(--ui-font-size-title);
                font-weight: var(--ui-font-weight-semibold)
            }

            .r-c-right__split {
                margin-top: 60px;
                margin-bottom: 30px;
                border-top: 1px solid var(--ui-border-color-split);
            }
        }
    }
}
</style>